<template>
  <div class="upload">
	  <div id="slider" class="mui-slider">
      	<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			<div class="mui-scroll">
				<router-link to = "/UPLOAD/NewInfo_Upload" class="mui-control-myitem " >
					新闻资讯
				</router-link>
				<router-link to = "/UPLOAD/ImageInfo_Upload" class="mui-control-myitem"  >
					图片分享
				</router-link>
				<router-link to = "/UPLOAD/GoodsInfo_Upload" class="mui-control-myitem"  >
					商品信息
				</router-link>
				<router-link to = "/UPLOAD/CommentInfo_Upload" class="mui-control-myitem"  >
					留言反馈
				</router-link>
				<router-link to = "/UPLOAD/CommentInfo_Upload" class="mui-control-myitem" >
					视频专区
				</router-link> 
			</div>
		</div>
	  </div>
	  	<transition>
			<router-view></router-view>
		</transition>
    </div>
</template>

<script>
import mui from "../lib/js/mui.min.js"
export default {
	data(){
		return {

		}
	},
	mounted(){
		mui(".mui-scroll-wrapper").scroll({
      		deceleration: 0.0005
    	});
	}
}
</script>

<style lang = 'less' scoped>
	*{
		touch-action: pan-y;
	}
	.upload{
		
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-myitem {
			color: inherit;
			border: 0;
		}
		.mui-segmented-control.mui-scroll-wrapper .mui-control-myitem {
			display: inline-block;
			width: auto;
			padding: 0 20px;
			border: 0;
		}
		.mui-segmented-control .mui-control-myitem {
			line-height: 38px;
			display: table-cell;
			overflow: hidden;
			width: 1%;
			-webkit-transition: background-color .1s linear;
			transition: background-color .1s linear;
			text-align: center;
			white-space: nowrap;
			text-overflow: ellipsis;
			color: #007aff;
			border-color: #007aff;
			border-left: 1px solid #007aff;
		}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-myitem.mui-active {
			border-bottom: 0;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-myitem.mui-active {
			color: #007aff;
			border-bottom: 2px solid #007aff;
			background: 0 0;
		}
		.mui-segmented-control .mui-control-myitem.mui-active {
			color: #fff;
			background-color: #007aff;
		}
	}
	.v-enter{
		transform: translateY(-100%);
		opacity: 0;
	}
	.v-leave-to{
		transform: translateY(100%);
		position: absolute;
		opacity: 0;
	}
	.v-enter-active,
	.v-leave-active{
  		transition: all .5s ease;
	}

</style>